<template>
  <div class="height-100">
    <div class="emotion_header">
      <el-tooltip
        class="item"
        effect="dark"
        :content="district"
        placement="top-start"
      >
        <span class="title_district">{{ district }}</span>
      </el-tooltip>

      <span>选择模型</span>
      <svg
        class="icon iclose"
        aria-hidden="true"
        style="cursor: pointer"
        @click="closePop"
      >
        <use xlink:href="#icon-guanbi"></use>
      </svg>
    </div>
    <div class="searchInput">
      <el-input
        clearable
        placeholder="输入关键字进行过滤"
        v-model="searchName"
        @input="searchNode(searchName)"
      ></el-input>
    </div>

    <div class="manage-left-tree" v-loading="modelsLoading">
      <el-tree
        :data="modelsData"
        :props="defaultProps"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        node-key="id"
        ref="trees"
        :filter-node-method="filterNode"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @mouseover="onMouseOver(node, data)"
          @mouseleave="onMouseDown(node, data)"
        >
          <span>
            <span
              v-if="data.children.length > 0"
              :style="{
                background:
                  searchNodes.indexOf(data.id) > -1
                    ? currentTreeSearch.$treeNodeId == data.$treeNodeId
                      ? '#D2691E'
                      : '#FFD700'
                    : '',
              }"
              >
              <!-- <img src="/icons/folder.png" alt="" />  -->
              {{ data.label_name }}
              <span
                v-show="
                  data.label !== data.label_name && data.label_name !== 'Thing'
                "
                >({{ data.label_name }})</span
              ></span
            >
            <span v-else
              >
              <!-- <img src="/icons/file.png" alt="" />  -->
              {{ data.label_name }}
              <span
                v-show="
                  data.label !== data.label_name && data.label_name !== 'Thing'
                "
                >({{ data.label_name }})</span
              >
            </span>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      district: "",
      searchName: "",
      modelsLoading: false,
      modelsData: [], //树形数据
      defaultProps: {
        label: "label_name",
        children: "children",
      },
      searchNodes: [],
      antObj: {},
    };
  },
  props: {
    IconseTting: {
      type: Object,
      default: [],
    },
  },
  watch: {
    IconseTting(newV, oldV) {
      console.log(newV);
      if (newV) {
        this.district = newV.name;
        this.antObj = newV;
      }
    },
  },
  mounted() {
    this.initGetModelTree();
  },
  methods: {
    //请求模型数据
    initGetModelTree() {
      this.$api.decision.modeltree.request().then(({ data }) => {
        console.log(data);
        this.modelsData = data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.labelName.indexOf(value) !== -1;
    },
    //点击节点
    handleNodeClick(data, node) {
      console.log(data);
      // console.log(data.children);
      // this.menuVisible = false;
      this.currentTreeData = data;
      //   this.selModel(data);
      this.zTree = $.fn.zTree;
      //  console.log(this.zTree._z)
      this.zTree._z.view.replaceModelClass(this.antObj.e,this.antObj.node, data);
    },
    //搜索当前树状
    searchNode(str) {
      this.$refs.trees.filter(str);
    },
    //鼠标浮动到具体的节点 显示操作
    onMouseOver(node, data) {
      // console.log(node, data);
      this.isOnmove = true;
      this.currentTreeMoveID = node.id;
    },
    //清除浮动
    onMouseDown(node, data) {
      this.isOnmove = false;
      this.currentTreeMoveID = node.id;
    },
    closePop() {
      this.$emit("closePopup", "model");
    },
  },
};
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>